<!-- 我的工单页 -->
<template>
  <div>
    <!-- 引入公共头部组件 -->
    <HeaderMenu
      title="我的工单"
      leftText="返回"
      rightText="新建"
      @rightEvent="onRightWork"
    />
    <div style="width: 100%;">
      <!-- 搜索区域 -->
      <form action="/">
        <van-search
          shape="round"
          input-align="center"
          background="#509DF7"
          id="searchInput"
          placeholder="请输入标题信息"
          show-action
          @search="search"
          v-model="SWOTitle"
          @clear="clear">
          <div slot="action" @click="onSearch" style="color:#fff">搜索</div>
        </van-search>
      </form>
      <van-tabs v-model="active" @change="call">
        <van-tab title="我的发起">
          <div class="formalBox">
            <van-list
              v-model="loading"
              :finished="finished"
              finished-text="没有更多了"
              @load="onLoading"
            >
              <div
                class="boxFormal"
                v-for="item in cardData"
                :key="item.Id"
                @click="sapleEdit(item)"
              >
                <div class="cardName" style="font-size:14px">
                  <div style="display:flex; justify-content: space-between;padding-right:20px">
                    <p>标题：{{ item.SWOTitle }}</p>
                    <van-tag v-if="item.State == 0" type="primary" style="padding:5px 15px">发起</van-tag>
                    <van-tag v-if="item.State == 1" type="success" style="padding:5px 15px">启动</van-tag>
                    <van-tag v-if="item.State == 2" type="warning" style="padding:5px 15px">执行</van-tag>
                    <van-tag v-if="item.State == 3" color="#7232dd" style="padding:5px 15px">超时</van-tag>
                    <van-tag v-if="item.State == 4" type="danger" style="padding:5px 15px">关闭</van-tag>
                  </div>
                  <p>客户：{{ item.CustomerName }}</p>
                </div>
                <div class="code" style="font-size:14px">
                  <van-row :gutter="10">
                    <van-col :span="12">
                      完成日期:{{ item.EndTimeRqstd ? item.EndTimeRqstd.substring(0, 10) : "未完成" }}
                    </van-col>
                    <van-col :span="12">
                      工单类型:{{ item.SWOType }}
                    </van-col>
                  </van-row>
                </div>
                <div style="text-align: right;margin-right: 5%">
                  <van-button
                    size="mini"
                    @click.stop="GLcardDataChangeClick(0, item)"
                    style="margin-top: 12px;"
                    type="info"
                  >编辑
                  </van-button
                  >
                  <van-button
                    size="mini"
                    @click.stop="GLcardDataChangeClick(1, item)"
                    style="margin-top: 12px;"
                    type="danger"
                  >删除
                  </van-button
                  >
                </div>
              </div>
            </van-list>
          </div>
        </van-tab>
        <van-tab title="我的待办">
          <div class="formalBox">
            <van-list
              :immediate-check="false"
              v-model="Myloading"
              :finished="Myfinished"
              finished-text="没有更多了"
              @load="onLoading"
            >
              <div
                class="boxFormal"
                v-for="item in MycardData"
                :key="item.Id"
                @click="mywork(item)"
              >
                <div class="cardName" style="font-size:14px">
                  <p>标题：{{ item.SWOTitle }}</p>
                  <p>客户：{{ item.CustomerName }}</p>
                </div>
                <div class="code" style="font-size:14px">
                  <van-row :gutter="10">
                    <van-col :span="12">
                      完成日期:{{ item.EndTimeRqstd ? item.EndTimeRqstd.substring(0, 10) : "未完成" }}
                    </van-col>
                    <van-col :span="12">
                      工单类型:{{ item.SWOType }}
                    </van-col>
                  </van-row>
                </div>
              </div>
            </van-list>
          </div>
        </van-tab>
      </van-tabs>
    </div>
    <!-- <PaginationCom :pagination="pagination" :Total="Total" :thisOjb="this" /> -->
    <!-- <Edit :readonly="readonly" :parentObj="this" ref="edit" /> -->
    <!-- <myWork :readonly="readonly" :parentObj="this" ref="myWork" /> -->
    <!-- <work :readonly="readonly" :parentObj="this" ref="work" /> -->
    <!-- <feedback :parentObj="this" ref="feedback" /> -->
  </div>
</template>

<script>
// import PaginationCom from "../../components/PaginationCom.vue";
// 引入公共头部组件
import HeaderMenu from "../../components/VolHeaderMenu.vue";
import {Card, Toast} from "vant";
import {
  Search,
  NavBar,
  Dialog,
  Pagination,
  SwipeCell,
  Empty,
  Icon,
  Tag
} from "vant";
// import Edit from "./Edit.vue";
// import work from "./work.vue";
// import feedback from "./feedback.vue";
// import myWork from "./myWork.vue";

export default {
  components: {
    // myWork,
    "van-tag": Tag,
    // PaginationCom,
    "van-icon": Icon,
    "van-swipe-cell": SwipeCell,
    "van-empty": Empty,
    "van-pagination": Pagination,
    "van-nav-bar": NavBar,
    "van-card": Card,
    "van-search": Search,
    // 注册公共头部组件
    HeaderMenu
    // Edit,
    //     feedback
    // work
  },

  data() {
    return {
      key: 0,
      image: require("../../assets/search.png"),
      // 是否显示检索提示
      isSearchMyworkOrder: false,
      // 是否在初始化时立即执行滚动位置检查
      immediateCheck: true,
      active: 0,
      readonly: false,
      loading: false,
      finished: false,
      PageRows: 10,
      pagination: {
        // 当前页数
        current: 1,
        // 每页条数
        pageSize: 5,
        // 总条数
        Total: 0,
        showTotal: 0
      },
      // 我的工单我的发起列表数据
      cardData: [],
      SWOloading: false,
      SWOfinished: false,
      MyWorkOrderRows: 10,
      SWOTitle: "",
      Total: 0,
      Keyword: "",
      data: [],
      MycardData: [],
      Myloading: false,
      Myfinished: false,
      MyToDoRows: 10,
      userId: "",
      GLtitle: "",
      GLloading: false,
      GLfinished: false,
      GLPageRows: 10,
      GLcardData: [],
      queryParams:{
        Condition: "SWOTitle", Keyword: ""
      }
    };
  },
  created() {
    //在页面加载时读取localStorage里的状态信息  
    if(localStorage.getItem('userId')){
      let obj={
        Id:localStorage.getItem('userId')
      }
      this.$store.commit('setUserInfoId', obj)
    }
   //在页面刷新时将vuex里的信息保存到localStorage里
    window.addEventListener("beforeunload",()=>{
      localStorage.setItem("userId",this.$store.state.system.userId)
    })


    // 是否显示检索提示
    this.isSearchMyworkOrder = true;
    // 默认不初始化load函数
    // this.immediateCheck = false;
    //  去除加载状态
    this.loading = false;
    this.userId = this.$store.state.system.userId
  },
  mounted() {
    this.userId = this.$store.state.system.userId

  },
 
  methods: {
    onSearch() {
      if (this.SWOTitle){
        this.queryParams.Keyword = this.SWOTitle
        this.search(this.SWOTitle);
      }else{
        this.queryParams.Keyword = ""
        this.search()
      }
    },
    //搜索按钮
    search(value) {
      this.queryParams.Keyword = value
      this.SWOTitle = value;
      // 页数重置
      this.pagination.current = 1;
      // 列表数据清空
      this.cardData = [];
      // 是否显示页面加载
      this.loading = true;
      // 关闭检索提示
      this.isSearchMyworkOrder = false;
      // 开始加载列表
      this.immediateCheck = true;
      // 开始初始化onloading函数
      this.onLoading();
    },
    statype(str) {
      if (str == 0) {
        return "primary";
      }
      if (str == 1) {
        return "success";
      }
      if (str == 2) {
        return "danger";
      }
    },
    status(str) {
      if (str == 0) {
        return "申请中";
      }
      if (str == 1) {
        return "审批通过";
      }
      if (str == 2) {
        return "驳回";
      }
    },
    // 我的工单列表编辑删除
    GLcardDataChangeClick(type, item) {
      if (type == 0) {
        // 点击的是编辑
        this.$router.push({
          path: "/service/work",
          query: {Id: item.Id, readonly: 1, urlType: 0}
        });
      } else {
        // 点击的是删除
        // 删除（
        Dialog.confirm({
          message: "确定要删除吗",
          confirmButtonColor: "#1989fa"
        })
          .then(() => {
            this.http
              .post("/SWOManagement/ServiceWorkOrderMain/DeleteData", [item.Id])
              .then(resJson => {
                if (resJson.Success) {
                  this.$toast("删除成功");
                  // 清空工单列表数据
                  this.cardData = [];
                  // 页数初始化
                  this.pagination.current = 1;
                  this.getMyWorkOrderList();
                } else {
                  this.$toast(resJson.Msg);
                  this.loading = false;
                }
              });
          })
          .catch(() => {
            console.log(123);
          });
      }
    },
    // 列表加载
    async onLoading() {
      if (this.active == 0) {
        // 获取我的工单我的发起列表数据
        this.getMyWorkOrderList()
      }
      if (this.active == 1) {
        this.getMyToDoList()
      }
    },
    // 跳转service、work页面
    mywork(item) {
      this.$router.push({
        path: "/service/myWork",
        query: {Id: item.Id}
      });
    },
    // 获取我的工单-我的发起
    getMyWorkOrderList() {
      this.loading=true
      this.http
        .post(
          "/SWOManagement/ServiceWorkOrderMain/GetDataListByMySelfCustomer",
          {
            PageIndex: 1,
            PageRows: this.MyWorkOrderRows,
            SortField: "CreateTime",
            SortType: "desc",
            Search: [
              {
                Condition: 'CreatorId',
                Keyword: this.userId || this.$store.state.system.userId
              },
              {...this.queryParams}
            ]
          }
        )
        .then(resJson => {
          this.cardData = resJson.Data;
          // 赋值总条数
          this.pagination.Total = resJson.Total;
          if (this.cardData) {
            if (this.cardData.length === 0) {
              // 数据全部加载完成
              this.finished = true;
              this.loading = false;
            } else {
              // 说明还有过多的数据
              if (this.cardData.length < this.pagination.Total) {
                this.pagination.showTotal = this.pagination.current * this.cardData.length;
                let arr = resJson.Data;
                // 拼接数组 赋值工单列表数据
                this.cardData = this.cardData.concat(arr);
                // 清除加载状态
                this.loading = true;
                this.finished = false;
              } else if (this.cardData.length == this.pagination.Total) {
                // 数据全部加载完成
                // 清除加载状态
                this.loading = false;
                this.finished = true;
                // **************************************************
                // 注意，，必须return  否则接口回频繁请求
              }
              return;
            }
          }

        });
    },
    // 获取我的工单-我的待办
    getMyToDoList() {
      this.http
        .post("/SWOManagement/ServiceWorkOrderMain/GetDataListByMyToDo", {
          PageIndex: 1,
          PageRows: this.MyToDoRows,
          SortField: "CreateTime",
          SortType: "desc",
          Search: [
            {
              Condition: "SWOTitle",
              Keyword: this.SWOTitle
            }
          ]
        })
        .then(resJson => {
          if (resJson.Success) {
            if (!resJson.Data) {
              resJson.Data = [];
            }
            this.MycardData = resJson.Data;
            this.Myloading = false;
            if (this.MycardData.length >= resJson.Total) {
              this.Myfinished = true;
            } else {
              this.MyOfinished = false;
            }
          }
        });
    },
    // 我的工单新建
    onRightWork() {
      this.$router.push({
        path: "/service/work",
        query: {readonly: 0, urlType: 0}
      });
    },
    // 我的工单查看详情
    sapleEdit(item) {
      this.$router.push({
        path: "/service/work",
        query: {Id: item.Id, readonly: 2, urlType: 0}
      });
    },
    // 我的发起导航栏点击事件
    call(key) {
      this.key = key;
      this.SWOTitle = ''
      if (key == 0) {
        // 我的发起列表数据
        // 重新加载
        this.cardData=[]
        this.loading=true
        this.finished=false
        this.getMyWorkOrderList();
      } else if (key == 1) {
        // 重新加载
        this.MycardData = []
        this.Myloading = true;
        this.Myfinished = false;
        // 我的代办列表数据
        this.getMyToDoList();
      }
    },
    // 返回上一页
    onClickLeft() {
      this.$router.go(-1);
    },
    onClickRight() {
      this.$router.push({path: "/service/Edit", query: {readonly: 0}});
    },
    //弹出页面
    Edit(item) {
      this.readonly = item.ApprovalStatus === 1;
      this.$router.push({
        path: "/service/Edit",
        query: {Id: item.Id, readonly: this.readonly ? 1 : 0}
      });
    },
    clear() {
      this.SWOTitle = "";
      this.queryParams.Keyword=""
      this.onLoading()
    },
  },
  watch:{
    $route(a,b){
      this.active=0
      this.getMyWorkOrderList()
      // handler(val,oldval){
      //   // 我的发起 我的代办导航栏默认初始化
      //   this.active = 0
      //   console.log('新路由信息', val);//新路由信息
      //   console.log('老路由信息',oldval);//老路由信息
      //   if(oldval.path === '/service/work'){
      //     this.cardData=[]
      //     this.loading=true
      //     this.finished=false
      //     this.getMyWorkOrderList()
      //   }
      // },
      // // 深度观察监听
      // deep: true
    }
  },
}
</script>

<style scoped>
/* 覆盖van-button的默认样式 */
.van-button {
  padding: 0 15px !important;
}

.search-none {
  margin-top: 40px !important;
}

.worktopitem {
  display: flex;
  justify-content: center;
  align-items: center;
}

.workradio {
  border-radius: 50%;
  width: 40%;
  height: 55%;
  background-color: rgba(255, 244, 234, 0.2);
  display: flex;
  justify-content: center;
  align-items: center;
}

.workradio img {
  height: 50px;
  width: 70%;
}

.workbottomimg img {
  width: 95%;
  margin-top: -14px;
}

.worktopimg img {
  width: 65%;
  margin-top: -20px;
}

.worklisttop {
  margin: 15px auto;
  width: 93%;
  height: 120px;
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
  padding: 5px 5px 5px 0;
  background: linear-gradient(to bottom right, #05b0ed, #17dcba);
}

.worklistbottom {
  margin: 0 auto;
  padding: 5px 5px 5px 0;
  width: 93%;
  height: 120px;
  display: flex;
  justify-content: space-between;
  border-radius: 10px;
  background: linear-gradient(180deg, #e99bfc 0%, #b560ff 100%);
}

.DeliverAddress {
  margin-left: 10px;
  padding-bottom: 10px;
}

.state {
  display: flex;
  justify-content: space-between;
}

.pagination {
  position: absolute;
  bottom: 5px;
  right: 20%;
}

.delete {
  padding-top: 10px;
  background-color: #fff;
  padding-right: 20px;
  height: 60px;
  font-size: 60px;
  color: red;
}

.outerBox {
  height: calc(100vh - 140px);
  padding-bottom: 60px;
  box-sizing: border-box;
  overflow: auto;
}

.btn {
  position: absolute;
  bottom: 0;
  right: 0;
}

.sampleName {
  font-weight: 600;
  line-height: 1.8;
  width: 240px;
  color: #000;
  font-size: 18px;
  margin-left: 10px;
  margin-top: 5px;
}

.MySamplebox {
  box-shadow: 2px 2px 5px #ccc;
  border-radius: 5px;
  position: relative;
  width: 95%;
  /* height: 85px; */
  margin: 3px auto;
  /* display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; */
  margin-bottom: 10px;
}

/* img {
  width: 100px;
  height: 100px;
} */

.fixedbox {
  position: fixed;
  bottom: 0;
  right: 0;
  /* height: 50px; */
  background: #fff;
  width: 100vw;
}

.pagination {
  position: absolute;
  bottom: 5px;
  right: 20%;
}

.code {
  /*display: flex;*/
  /*justify-content: start;*/
  margin-left: 10px;
  color: #777;
}

.Foricon {
  color: blue;
  position: absolute;
  right: 8px;
}

.btn {
  position: absolute;
  bottom: 0;
  right: 0;
}

.formalBox {
  height: calc(100vh - 150px);
  padding-bottom: 50px;
  box-sizing: border-box;
  overflow: auto;
}

.cardName {
  padding-top: 10px;
  /* margin-left: 10px; */
  margin-bottom: 5px;
  color: #000000;
  font-weight: 600;
  font-size: 18px;
  line-height: 1.8;
  padding-left: 10px;
}

.companyAddress {
  padding-top: 10px;
  margin-left: 10px;

  color: #777;
  /* font-weight: 600;
  font-size: 18px; */
  line-height: 1.3;
}

.boxFormal {
  box-shadow: 2px 2px 5px #ccc;
  border-radius: 5px;
  position: relative;

  width: 95%;
  /* height: 80px; */
  padding-bottom: 10px;
  margin: 3px auto;
  margin-bottom: 10px;
}

/* .Father {
  display: flex;
} */
</style>
